<template>
  <div v-if="list.length > 0" class="productionBox bg">
    <div class="title">生产计划</div>
    <div v-for="(item, index) in list" :key="index" class="plan_box">
      <div class="proBox">
        <a-row :gutter="24">
          <a-form>
            <a-col :span="12">
              <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" label="工序名称">
                {{ item.workingProcedureName }}
              </a-form-item>
              <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" label="加工设备">
                <div class="macNums">
                {{ item.macNums }}{{ item.macNums }}{{ item.macNums }}{{ item.macNums }}{{ item.macNums }}{{ item.macNums }}{{ item.macNums }}{{ item.macNums }}{{ item.macNums }}{{ item.macNums }}{{ item.macNums }}{{ item.macNums }}
                </div>
              </a-form-item>
              <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" label="起止时间">
                {{ item.startTime }}-{{ item.endTime }}
              </a-form-item>
              <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" label="程序名">
                {{ item.produceName }}
              </a-form-item>
              <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" label="加工数量">
                <div class="plan_number">
                  <div>{{ item.totalFinishNum }}</div>
                  <div @click="handleDetail(item.workingProcedureId)">生产详情</div>
                </div>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="item.artWorkSheet">
              <a-form-item label="工艺图纸">
                <img  :src="item.artWorkSheet" alt="" />
              </a-form-item>
            </a-col>
          </a-form>
        </a-row>
      </div>
    </div>
    <plan-modal ref="planModal"></plan-modal>
  </div>
</template>

<script>
import planModal from './planModal.vue';
export default {
  components: { planModal },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    handleDetail(id) {
      this.$refs.planModal.params.id = id;
      this.$refs.planModal.showModal();
    },
  },
};
</script>

<style lang="less" scoped>
.productionBox {
  margin: 20px 0;
  padding: 20px;

  .title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
  }
}

.plan_box {
  margin: 20px 0;
  border: 1px solid #ccc;
}

.proBox {
  padding: 20px 0 0 0;

  img {
    width: calc(320 / 1920 * 100vw);
    height: calc(200 / 1080 * 100vh);
  }
}

.plan_number {
  display: flex;
  align-items: center;
  justify-content: space-between;

  div:nth-child(2) {
    margin-right: 50px;
    color: #4395ff;
    cursor: pointer;
  }
}
.macNums{
  word-break: break-word;//文本超出 自动换行
}
</style>
